<template>
  <ul>
    <li v-for="item in goods" :key="item.id">
      {{item.title}} - {{item.price}}
      <br />
      <button
        @click="cartStore.addProductToCart(item)"
        :disabled="!item.inventory"
      >
      加入购物车
      </button>
    </li>
  </ul>
</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useProductsStore } from '@/store/products.ts'
import { useCartStore } from '@/store/cart.ts'
const productStore = useProductsStore()
const cartStore = useCartStore()
// 调用actions 获取商品信息
productStore.getGoodsList()
// 解构商品信息
const { goods } = storeToRefs(productStore)
</script>